#{extends '/template/main.html' /}
<style>
    .col-sm-2-label{
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        width: 13%;
    }
    .col-sm-10-input{
        float: left;
        width: 18%;
    }
    .col-sm-10-row{
        float: left;
        width: 80%;
    }
    .td_input{
        border: 0;
        height: 30px;
        text-align: left;
        background-color:transparent;
    }
    .td_input_edit{
        height: 30px;
        text-align: left;
        border-radius:5px;
        width: 80%;
    }

    .Validform_checktip {
        text-align: left;
        line-height: 32px;
        padding-left: 10px;
    }


</style>

<script>
    var id='${id}';
    var pageNumber = '${pageNumber}';

    $(function () {

        $.getJSON('/power/admin/AdminRoleCtrl/loadRoleOperates',{id:id},function (data) {
            var roleOperateList = data.roleOperateList;
            var businessList = data.businessList ;
            //初始化操作
            initOperateList(businessList);

            //初始化操作勾选状态
            if(roleOperateList != null){
                for(var i = 0 ; i < roleOperateList.length ; i++){
                    var operate_id = roleOperateList[i].adminBusinessOperate.id;
                     $('#operate_'+operate_id).prop('checked',true);

                }
            }
            //初始化业务名称勾选状态
            if(businessList != null){
                for(var i = 0 ; i < businessList.length ; i++){
                    var businessId = businessList[i].id ;
                    var isCheck = true ;
                    $("input[name='operate_" + businessId + "']").each(function () {
                        if (this.checked == false) {
                            isCheck = false;
                        }
                    });
                    $('#business_'+businessId).prop('checked',isCheck);

                }
            }
            //初始化复选框全选勾选状态
            var isAllCheck = true;
            $('.operate').each(function() {
                if (this.checked == false) {
                    isAllCheck = false;
                }
            });
            if(id <= 0) isAllCheck = false ;
            $('#idAllCheck').prop('checked',isAllCheck);
        });

        //菜单变更事件
        $('#idMenuId').change(function () {
            var newValue = $(this).children('option:selected').val();
            $.getJSON('/power/admin/AdminRoleCtrl/loadMenuBusienss' , {menuId:newValue} , function (data) {
                initOperateList(data);
                $('#idAllCheck').prop('checked',false);
            });
        });

    });

    //加载操作数据
    function initOperateList(businessList) {
        if(businessList != null && businessList.length >0){
            //清空tboday数据
            $('#operateList tbody').html('');
            for(var i = 0 ; i < businessList.length ; i++){
                var business = businessList[i];
                 var trHtml =  '<tr> <td><input id="business_'+business.id+'" type="checkbox" name="checkRow"  class="ck operate"   value="'+business.id+'" onclick="checkSingleRow(this)"> '+business.name+' </td>'
                var trHtmlOperate = '<td>';
                if(business != null && business.operateList != null){
                    for(var j = 0 ; j < business.operateList.length ; j++){
                        var operate = business.operateList[j];
                        trHtmlOperate += '<input type="checkbox" class="ck operate role_operate" id="operate_'+operate.id+'" name="operate_'+business.id+'" value="'+operate.id+'" >'+operate.name+'&nbsp;&nbsp;';
                    }
                    trHtmlOperate +='</td>';
                }
                trHtml += trHtmlOperate +'</tr>';
                $('#operateList').append(trHtml);
            }

        }
    }

    //全部  全选/全不选
    function checkAllRows(allRows) {
        $("input[type='checkbox']").prop("checked", allRows.checked);
    }

    //单行 全选/全不选
    function checkSingleRow(thisRow) {
        $('input[name="operate_' + thisRow.value + '"]').prop('checked', thisRow.checked);
    }


    function save() {
        var operateIds = [] ;
        $('.role_operate').each(function() {
            if (this.checked == true) {
                operateIds.push(this.value)
            }
        });
        var str = "";
        for(var i = 0 ; i < operateIds.length ; i++ ){
            str += operateIds[i] +",";
        }

        $('#idOperateIds').val(str);
        $('#idForm').submit();
    }

</script>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title" onclick="save()">
            <button id="idBtnSave" class="btn btn-info" onclick="save();">保存</button>
        </h3>
        <div class="panel-options">
            <a href="#" data-toggle="panel" >
                <span class="collapse-icon">&ndash;</span>
                <span class="expand-icon">+</span>
            </a>
        </div>
    </div>
    <div class="panel-body">

        <form id="idForm" method="POST" role="form" action="/power/admin/AdminRoleCtrl/saveDetail" enctype="multipart/form-data" class="form-horizontal validate">
            <input id="idAdminRoleId" name="adminRole.id" value="${adminRole?.id}" type="hidden">
            <input id="idPageNumber" name="pageNumber" value="${pageNumber}" type="hidden">
            <input id="idOperateIds" name="operateIds" value="" type="hidden">
            <div class="form-group">
                <label for="idCode" class=" col-sm-2-label control-label" >角色编号</label>
                <div class="col-sm-10-input">
                    <input type="text" class="form-control " name="adminRole.code" id="idCode" value="${adminRole?.code}" readonly placeholder="">
                </div>
                <label for="idName" class="col-sm-2-label control-label" style="">角色名称</label>
                <div class="col-sm-10-input">
                    <input type="text" class="form-control" name="adminRole.name" value="${adminRole?.name}" id="idName" placeholder="">
                </div>
                <label for="idMenu" class="col-sm-2-label control-label" style="">菜单</label>
                <div class="col-sm-10-input">
                    <select class="form-control" name="adminRole.menuId" id="idMenuId" placeholder="">
                        <option value="" #{if adminRole?.menuId == null} selected="true"#{/if}>---请选择---</option>
                        #{list adminMenuList , as:'menu'}
                        <option value="${menu.id}" #{if adminRole?.menuId == menu.id} selected="true" #{/if}>${menu.name}</option>
                        #{/list}
                    </select>
                </div>
            </div>
            <div class="table-responsive" >
                <table id="operateList" class=" table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th class="no-sorting">
                            <input id="idAllCheck" name="checkAll" type="checkbox" onclick="checkAllRows(this)" class="ck">业务名称
                        </th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="middle-align">

                    </tbody>
                </table>
            </div>

        </form>

    </div>
</div>



<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/uikit/vendor/codemirror/codemirror.css">
<link rel="stylesheet" href="/public/js/uikit/uikit.css">
<link rel="stylesheet" href="/public/js/uikit/css/addons/uikit.almost-flat.addons.min.css">


<script src="/public/jquery/jquery.loadmask.js"></script>
<script src="/public/js/jquery-validate/jquery.validate.min.js"></script>
<script src="/public/js/wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="/public/js/wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="/public/js/uikit/vendor/codemirror/codemirror.js"></script>
<script src="/public/js/uikit/vendor/marked.js"></script>
<script src="/public/js/uikit/js/uikit.min.js"></script>
<script src="/public/js/uikit/js/addons/htmleditor.min.js"></script>
<script src="/public/js/ckeditor/ckeditor.js"></script>
<script src="/public/js/ulmsale/common.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap.min.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap-table.min.js"></script>
<script src="/public/lib/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap-datetimepicker.min.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/public/lib/bootstrap-table/js/bootstrap-select.min.js"></script>


<script src="/public/lib/layer/js/layer.js"></script>




